<template>
    <view class="page-container bg-white">
        <form ref="form" @submit="onSubmit">
            <view class="form-item__box form-item__right">
                <view class="form-item">
                    <view class="form-item__label">活动名称</view>
                    <view class="form-item__content">
                        <input placeholder-class="placeholder" v-model="formData.subject" name="subject" class="form-item__input" type="text" placeholder="请输入活动名称" />
                        <icon v-if="formData.subject" @click="formData.subject = ''" class="clear-icon" type="clear" size="16"> </icon>
                    </view>
                </view>
                <view class="form-item">
                    <view class="form-item__label">活动日期</view>
                    <view class="form-item__content">
                        <picker :start="start" @change="changePicker" mode="date" class="form-item__input form-item__picker">
                            <view v-if="!formData.using_date" class="placeholder">请选择活动日期</view>
                            <template v-else>{{ formData.using_date }}</template>
                        </picker>
                        <text class="hx-icon-gengduo arrow-icon"></text>
                    </view>
                </view>
                <view class="form-item__box">
                    <view class="form-item border-none">
                        <view class="form-item__title title-border">活动类型</view>
                    </view>
                    <view class="form-item form-item__column">
                        <view class="form-item__content wrap">
                            <button
                                v-for="(item, index) in typeList"
                                :key="index"
                                :class="`btn-small btn-type ${formData.type === item.id ? 'btn-primary' : 'btn-info plain'}`"
                                @click="changeType(item)"
                            >
                                {{ item.name }}
                            </button>
                        </view>
                    </view>
                </view>
                <view class="form-item__box">
                    <view class="form-item border-none">
                        <view class="form-item__title title-border">活动时段</view>
                    </view>
                    <view class="form-item form-item__column">
                        <view class="form-item__content wrap">
                            <button :class="`btn-small mb2 ${formData.day_time === 1 ? 'btn-primary' : 'btn-info plain'}`" @click="formData.day_time = 1">午宴</button>
                            <button :class="`btn-small mb2 ${formData.day_time === 2 ? 'btn-primary' : 'btn-info plain'}`" @click="formData.day_time = 2">晚宴</button>
                        </view>
                    </view>
                </view>
                <view class="form-item">
                    <view class="form-item__label">活动地点</view>
                    <view class="form-item__content">
                        <input placeholder-class="placeholder" v-model="formData.place" name="place" class="form-item__input" type="text" placeholder="请输入活动地点" />
                        <icon v-if="formData.place" @click="formData.place = ''" class="clear-icon" type="clear" size="16"> </icon>
                    </view>
                </view>
            </view>
            <view class="page-footer static">
                <button class="btn-primary flex" form-type="submit" :loading="loading">
                    {{ loading ? "提交中" : "提交" }}
                </button>
            </view>
        </form>
    </view>
</template>

<script>
import WxValidate from "@/utils/WxValidate"
export default {
    data() {
        return {
            start: this.$formatDate(new Date(), "date"),
            loading: false,
            formData: {
                subject: "",
                using_date: "",
                type: 1,
                day_time: 1,
                place: ""
            },
            typeList: []
        }
    },
    onLoad() {
        this.initRule()
        this.initData()
    },
    methods: {
        async initData() {
            this.typeList = await this.$api.getActivityTypes()
            this.changeType({ id: 1 })
        },
        changeType({ id }) {
            this.formData.type = id
            this.formData.subject = `欢迎来到${this.typeList.find(item => item.id === id)?.name}现场`
        },
        initRule() {
            let rules = {
                subject: { required: true },
                using_date: { required: true }
            }
            let message = {
                subject: { required: "请输入活动名称" },
                using_date: { required: "请选择活动日期" }
            }
            this.validate = new WxValidate(rules, message)
        },
        changePicker(e) {
            this.formData.using_date = e.detail.value
        },
        async onSubmit() {
            try {
                // 传入表单数据，调用验证方法
                if (!this.validate.checkForm(this.formData)) {
                    const error = this.validate.errorList[0]
                    return this.$showToast(error.msg)
                }
                if (this.loading) return
                this.loading = true
                this.$showLoading("请求中")
                await this.$api.addActivity(this.formData)
                await this.$showWaiting("创建成功", 1500)
                this.$navBack()
                this.loading = false
            } catch {
                this.loading = false
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.form {
    &-item__box {
        margin: 0;
    }
    &-item {
        .btn-type {
            margin-left: 0;
            margin-bottom: 20rpx;
            margin-right: 20rpx;
        }
    }
}
</style>
